/* 重置一些默认样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  display: flex;                /* 让body成为flex容器 */
  flex-direction: column;       /* 使得子元素在竖直方向排列 */
  height: 100vh;                /* 让body占满整个视口高度 */
}

/* 顶部导航栏 */
.navbar, .sidebar {
  background-color: #2c3e50;
  color: white;
}

.navbar {
  width: 100%;
  padding: 10px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navbar .logo {
  font-size: 1.5rem;
}

.navbar .user-info {
  display: flex;
  align-items: center;
}

.navbar .avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 10px;
}

/* 侧边导航栏 */
.sidebar {
  width: 250px;
  height: 100vh;
  padding-top: 20px;
  position: fixed; /* 使sidebar固定在左侧 */
  top: 0;
  left: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
}

.sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar ul li {
	position:relative;/* 为悬停显示的子菜单提供定位 */
}

/* 一级菜单样式 */
.menu-header {
  display: block;
  padding: 10px 20px;
  text-decoration: none;
  color: white;
  cursor: pointer;
}

/* 二级菜单样式（初始隐藏） */
.submenu {
  display: none; /* 初始隐藏 */
  background-color: #34495e; /* 子菜单背景色 */
  margin: 0;
  padding: 0;
  list-style: none;
  position: absolute; /* 子菜单定位 */
  top: 100%; /* 紧贴一级菜单的下方 */
  left: 0;
  width: 100%; /* 子菜单宽度与父菜单一致 */
  z-index: 1000; /* 保证显示优先级 */
}

.submenu li {
  border-bottom: 1px solid #2c3e50; /* 子菜单项的分隔线 */
}

.submenu li a {
  display: block;
  padding: 10px 20px;
  color: white;
  text-decoration: none;
}

.submenu li a:hover {
  background-color: #2c3e50;
}

/* 悬停时显示子菜单 */
.menu-item:hover .submenu {
  display: block; /* 鼠标悬停时显示子菜单 */
}

.menu-header:hover {
  background-color: #34495e;
}


.sidebar ul li a {
  display: block;
  padding: 10px;
  color: white;
  text-decoration: none;
  margin: 5px 0;
}

.sidebar ul li a:hover {
  background-color: #34495e;
}

/* 主内容区域 */
main {
  margin-left: 250px;           /* 给main留出左侧sidebar的空间 */
  padding: 20px;
  flex-grow: 1;                 /* 让main内容区域占据剩余空间 */
}

section {
  background-color: white;
  margin-bottom: 20px;
  padding: 20px;
  border-radius: 8px;
}

.search-box {
  display: flex;
  align-items: center;
}

.search-box button {
  margin-left: 10px;
}


table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}

table th, table td {
  padding: 10px;
  border: 1px solid #ddd;
  text-align: left;
}

/* 按钮样式 */
button {
  padding: 10px 15px;
  background-color: #3498db;
  color: white;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  margin-top: 10px;
}

button:hover {
  background-color: #2980b9;
}

/* 底部信息 */
.footer {
  background-color: #2c3e50;
  color: white;
  text-align: center;
  padding: 10px 0;
  margin-top: auto;             /* 将footer推到页面底部 */
}

.footer a {
  color: white;
  text-decoration: none;
  margin-left: 15px;
}

.footer a:hover {
  text-decoration: underline;
}

/* 用户管理部分 */
.stat-item {
  display: inline-block;
  width: 30%;
  padding: 10px;
  background-color: #ecf0f1;
  border-radius: 5px;
  margin-right: 10px;
}

.stat-item h3 {
  font-size: 1.1rem;
}

.search-box {
  margin-bottom: 15px;
}

.search-box input {
  padding: 8px;
  width: 250px;
}

.search-box button {
  padding: 8px;
  background-color: #3498db;
  color: white;
  border: none;
}

/* 弹窗样式 */
.modal {
  display: none; /* 默认隐藏 */
  position: fixed; /* 固定位置 */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5); /* 背景半透明 */
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  width: 400px;
  display: flex;
  flex-direction: column;
  align-items: center; /* 使内容居中 */
  margin-top:15%;
  margin-left:40%;
}

#close-modal {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 20px;
  cursor: pointer;
}

#modal-title {
  margin-bottom: 20px;
  text-align: center;
}

/* 表单样式 */
form label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
}

form input {
  width: 100%;
  padding: 8px;
  margin-bottom: 15px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

form button {
  width: 48%;
  padding: 10px;
  background-color: #27ae60;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

form button:hover {
  background-color: #2ecc71;
}

/* 取消按钮样式 */
form .cancel-btn {
  background-color: #e74c3c;
}

form .cancel-btn:hover {
  background-color: #c0392b;
}

/* 调整按钮位置 */
form .button-container {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

/* 设置欢迎信息的样式 */
.welcome-message {
  text-align: center;
  font-size: 24px;
  margin-top: 20px; /* 上方间距 */
}

.course-item {
  margin-bottom: 20px;
}

.unit-title {
  font-weight: bold;
}

.unit-status {
  color: #888;
}
